<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>chosen自定义下拉插件-Jquery插件库-林氏智造</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/ui.css" rel="stylesheet" />
		<link href="css/shCoreDefault.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="js/shCore.js"></script>
		<script type="text/javascript" src="js/shBrushCSharp.js"></script>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
		<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				$('#demo1').chosen({
					no_results_text: "无搜索结果"
				});
				
				$('#demo2').chosen({
					no_results_text: "无搜索结果",
					max_selected_options: 7
				}).bind("chosen:maxselected", function () {
					alert('最多选择7个选项');
				});
				
			});
		</script>
	</head>
	<body id="main">
		
		<div class="slidebar">
			<a href="http://www.0773linji.com" title="林氏智造" class="logo">林氏智造</a>
			<div class="slidebar_title">Jquery<span class="ver">插件库</span></div>
            <iframe src="../menu.html" frameborder="0"></iframe>
		</div>
		
		<div class="content">
			
			<div class="caption"><h2>chosen自定义下拉插件</h2><span class="file">Define in : chosen.jquery.min.js</span></div>
			
			<div class="mod_desc">
        			<p>老外封装的自定义下拉（美化select）插件，支持多选！</p>
    			</div>
    			
    			<h3 class="title_lv2">
    				$("<span>target</span>").chosen([ <em>options</em> ]);
    			</h3>
    			
    			<dl class="deps">
        			<dt>依赖</dt>
        			<dd>JS : jquery-1.10.0.min.js</dd>
        			<dd>浏览器 : ie7+</dd>
    			</dl>
    			
    			<div class="params_box">
				<h5>参数</h5>
				<ul class="params_list">
					<li>
						<dl>
							<dt>target</dt>
							<dd>String</dd>
						</dl>
						<div class="params_desc">
							<span class="type required">必需</span>
							<p>target DOM元素ID或者DOM元素class,对匹配元素进行插件绑定。</p>
						</div>
					</li>
					<li>
						<dl>
							<dt>options</dt>
							<dd>Object</dd>
						</dl>
						<div class="params_desc">
							<span class="type optional">可选</span>
							<p>多选形式的可配置参数。</p>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="article_box">
        			<p>下表列出了options常用参数，具体参数请到chosen官网查看（https://github.com/harvesthq/chosen）</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:100px">
            <col style="width:70px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>参数</th>
                <th>数据类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">no_results_text</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">无结果</span></td>
                <td class="t_l">
                    <p>无搜索结果显示文案</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">max_selected_options</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">0</span></td>
                <td class="t_l">
                    <p>最多能选择多少项</p>
                    <p>与多选功能配合使用</p>
                </td>
            </tr>
        </tbody>
    </table>
    
    <div class="article_box">
        			<p>下表列出了常用方法。</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>方法名</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">bind</b></td>
                <td class="t_l">
                    <p>绑定相关方法(chosen:maxselected:触发超过多大选择数量)</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">change</b></td>
                <td class="t_l">
                    <p>当值变化时触发(function(evt, params){})，具体参看官方手册</p>
                </td>
            </tr>
        </tbody>
    </table>
    
    
    <div class="example_box">
        <h5>例子一：基本调用单选</h5>
        <p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">/* @group Base */
.chosen-container{width:216px;border:1px solid #f4f4f4; height:40px;position:relative; z-index:1; cursor:pointer; float:left; display:inline;background-color: #f4f4f4;}
.chosen-container .chosen-drop {display: none;position:absolute; left:-1px; top:43px;border:1px solid #e8e8e8;width: 100%;}
.chosen-container.chosen-with-drop{z-index: 2;}
.chosen-container.chosen-with-drop .chosen-drop {display: block;}
.chosen-container a {}
.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {}
.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {}
.chosen-container .chosen-results{max-height:145px;overflow: auto;overflow-x: hidden;}
.chosen-container .chosen-results li{display:block; height:29px; line-height:29px; padding:0px 10px;background-color:#ffffff;color: #989898;}
.chosen-container .chosen-results li:hover,
.chosen-container .chosen-results li.result-selected{background-color:#7254b6; color:#FFF;}

/* @end */
/* @group Single Chosen */
.chosen-container-single{}
.chosen-container-single .chosen-single {height:40px; line-height:41px; color:#333; padding:0px 10px; padding-right: 28px;display:block;overflow:hidden;}
.chosen-container-single .chosen-default {color: #999;}
.chosen-container-single .chosen-single span {}
.chosen-container-single.chosen-container-active span {}
.chosen-container-single .chosen-single abbr {}
.chosen-container-single .chosen-single abbr:hover {}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {}
.chosen-container-single .chosen-single div {}
.chosen-container-single .chosen-single div b {width:8px; height:4px; position: absolute;right: 10px;display: block;top: 50%;margin-top: 0px;background: url(form_icon.png) -21px -23px no-repeat;}
.chosen-container-single .chosen-search {padding:0px 10px;height: 28px;border-bottom: 1px solid #f4f4f4;background-color: #FFFFFF;}
.chosen-container-single .chosen-search input[type="text"] {border: 1px solid #FFFFFF;height: 20px;margin-top: 3px;}
.chosen-container-single .chosen-drop {}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {}
.chosen-container-single.chosen-with-drop .chosen-drop {}
.chosen-container-single.chosen-with-drop .chosen-single div b{background-position:-21px -73px;}
.chosen-container-single:hover .chosen-single div b{background-position:-21px -73px;}

.search_field_select_chosen{height: 34px;border-color:#e8e8e8;margin-right: 20px;}
.search_field_select_chosen .chosen-drop{top: 37px;}
.search_field_select_chosen .chosen-single{height: 34px; line-height: 34px;}</pre>
        </div>
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$('#demo1').chosen({
					no_results_text: "无搜索结果"
				});
		</pre>
        </div>        
        
        <div class="demo_box">
            
        
        <div style="height: 60px;">
        <select id="demo1" data-placeholder="请选择" style="width: 200px;">
           	<option></option>
    			<option value="首课沟通反馈">首课沟通反馈</option>
            	<option value="学生日常沟通反馈">学生日常沟通反馈</option>
           	<option value="家长日常沟通反馈">家长日常沟通反馈</option>
            <option value="投诉反馈">投诉反馈</option>
            <option value="事件处理">事件处理</option>
            <option value="critique反馈">critique反馈</option>
 		</select>
		</div>
            
        </div>
        
    </div>
    
    
    <div class="example_box">
        <h5>例子二：基本调用多选</h5>
        <p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  height: auto !important;
  height: 1%;
  cursor: text;
}
.chosen-container-multi .chosen-choices li {
	float: left;
  	list-style: none;
  	height: 40px;
}
.chosen-container-multi .chosen-choices li.search-field {
	margin: 0;
  	padding: 0;
  	white-space: nowrap;
  	margin-left: 5px;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	height: 20px;
	border:1px solid #f4f4f4;
	margin-top:9px;
	background-color: #f4f4f4;
 	color: #999;
}
.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  height: 20px;
  border:1px solid #f4f4f4;
  max-width: 100%;
  border-radius: 3px;
  color: #333;
  line-height: 20px;
  cursor: default;
  background-color:#7254b6; color:#FFF;
  margin-top:9px;
  padding: 0px 20px 0px 5px;
}
.chosen-container-multi .chosen-choices li.search-choice span {}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 50%;
  right: 4px;
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background:url(chosen_close.png) 0px  0px no-repeat;
  font-size: 1px;
  cursor: pointer;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {}
.chosen-container-multi .chosen-choices li.search-choice-disabled {}
.chosen-container-multi .chosen-choices li.search-choice-focus {}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {}
/* @end */</pre>
        </div>
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$('#demo2').chosen({
					no_results_text: "无搜索结果",
					max_selected_options: 7
				}).bind("chosen:maxselected", function () {
					alert('最多选择7个选项');
				});
		</pre>
        </div>        
        
        <div class="demo_box">
            
        
        <div style="height: 60px;">
        <select id="demo2" data-placeholder="请选择" style="width: 500px;" multiple="multiple">
           	<option></option>
    			<option value="首课沟通反馈">首课沟通反馈</option>
            	<option value="学生日常沟通反馈">学生日常沟通反馈</option>
           	<option value="家长日常沟通反馈">家长日常沟通反馈</option>
            <option value="投诉反馈">投诉反馈</option>
            <option value="事件处理">事件处理</option>
            <option value="critique反馈">critique反馈</option>
 		</select>
		</div>
            
        </div>
        
    </div>
    
   
    
    
    <div class="download">
        <h3>立即下载</h3>
        <div class="download_box">
            <a href="#" target="_blank" class="btn_download btn_download_wide">
                <span class="icon_box"><s class="icon_download"></s></span>
                <span class="title">chosen</span>
            </a>
        </div>
    </div>
    
    <div class="download">
        <h3>联系我</h3>
        <div class="download_box">
           <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=317365887&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:317365887:53" alt="请注明通过林氏智造发现此QQ" title="请注明通过林氏智造发现此QQ"/></a>
        </div>
    </div>
			
			
		</div>
		
	</body>
</html>
